<template>
  <div class="install">
    <div class="nav">
      <van-icon
        name="arrow-left"
        @click="goback"
      />
      <span class="title">设置</span>
    </div>
    <div class="option">
      <van-cell-group>
        <van-switch-cell
          v-model="checked1"
          title="仅Wi-Fi联网"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked2"
          title="流量提醒"
        />
      </van-cell-group>
      <div>
        <p
          class="o_line"
          v-for="item in list1"
          :key="item.id"
        >
          <span class="o_title">{{item.title}}</span>
          <span class="o_content">{{item.content}}</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <p class="line"></p>
      <div>
        <p
          class="o_line"
          v-for="item in list2"
          :key="item.id"
        >
          <span class="o_title">{{item.title}}</span>
          <span class="o_content">{{item.content}}</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <van-cell-group>
        <van-switch-cell
          v-model="checked3"
          title="自动进入播放页"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked4"
          title="播放页自动播放音乐影片"
        />
      </van-cell-group>
      <p class="line"></p>
      <van-cell-group>
        <van-switch-cell
          v-model="checked5"
          title="展示底部直播导航"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked6"
          title="播放页截屏分享"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked7"
          title="锁屏、车载蓝牙歌词"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked8"
          title="自动适应系统深浅外观"
        />
      </van-cell-group>
      <van-cell-group>
        <van-switch-cell
          v-model="checked9"
          title="允许通过iCloud/iTunes备份"
        />
      </van-cell-group>
      <div>
        <p
          class="o_line"
          v-for="item in list3"
          :key="item.id"
        >
          <span class="o_title">{{item.title}}</span>
          <span class="o_content">{{item.content}}</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <p class="line"></p>
      <div>
        <p
          class="o_line"
          v-for="item in list4"
          :key="item.id"
        >
          <span class="o_title">{{item.title}}</span>
          <span class="o_content">{{item.content}}</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <p class="line"></p>
      <div>
        <p class="o_line">
          <span class="o_title">关于QQ音乐</span>
          <span class="o_content"></span>
          <van-icon name="arrow" />
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    checked1: false,
    checked2: false,
    checked3: true,
    checked4: false,
    checked5: false,
    checked6: false,
    checked7: true,
    checked8: false,
    checked9: true,
    list1: [
      {
        id: 0,
        title: '视频自动播放',
        content: 'Wi-Fi下开启'
      },
      {
        id: 1,
        title: '音乐缓存上限',
        content: '1G'
      },
      {
        id: 2,
        title: '最近播放列表设置',
        content: '跟随账号展示'
      }
    ],
    list2: [
      {
        id: 0,
        title: '在线试听品质',
        content: 'HQ高品质'
      },
      {
        id: 1,
        title: '歌曲下载品质',
        content: 'HQ高品质'
      },
      {
        id: 2,
        title: '边听边存',
        content: '未开启'
      },
      {
        id: 3,
        title: '音效设置',
        content: ''
      }
    ],
    list3: [
      {
        id: 0,
        title: '传歌到手机',
        content: ''
      },
      {
        id: 1,
        title: 'QPlay与车载音乐',
        content: ''
      },
      {
        id: 2,
        title: '蓝牙音乐管家',
        content: '未开启'
      },
      {
        id: 3,
        title: '添加“听歌识曲”到桌面',
        content: ''
      },
      {
        id: 4,
        title: '连接HomePod',
        content: ''
      },
      {
        id: 5,
        title: '添加Siri捷径',
        content: ''
      }
    ],
    list4: [
      {
        id: 0,
        title: '推送设置',
        content: ''
      },
      {
        id: 1,
        title: '消息设置',
        content: ''
      },
      {
        id: 2,
        title: '个人资料',
        content: ''
      },
      {
        id: 3,
        title: '隐私设置',
        content: ''
      },
      {
        id: 4,
        title: '黑名单设置',
        content: ''
      }
    ]
  }),
  methods: {
    goback() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="scss" scoped>
.install {
  background-color: #eee;
  height: 1440px;
  overflow: hidden;
  .nav {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    align-items: center;
    .title {
      flex: 1;
      text-align: center;
    }
  }
  .option {
    .o_line {
      display: flex;
      justify-content: space-between;
      margin: 0 10px;
      line-height: 44px;
      color: #aaa;
      height: 44px;
      .van-icon {
        margin-left: 10px;
        line-height: 44px;
      }
      .o_title {
        flex: 1;
        color: #000;
      }
      .o_content {
        font-size: 12px;
      }
    }
    .line {
      width: 100%;
      border-bottom: 1px solid #ddd;
      margin-left: 10px;
    }
    .van-cell {
      background-color: #eee;
      font-size: 16px;
      padding-left: 10px;
      // margin-top: 10px;
      // border-top: 1px solid #ddd;
      .van-switch {
        background-color: #ddd;
      }
      .van-switch--on {
        background-color: #31c27c;
      }
      .van-cell__title {
        flex: 2;
      }
    }
    .checkout {
      width: 100%;
      height: 40px;
      margin: 10px;
      background-color: #f5f4f4;
      text-align: center;
      line-height: 40px;
      color: tomato;
      border-radius: 25px;
    }
  }
}
</style>
